<template>
	<view class="feedback">
		<view class="pagetitle">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="right">
				<view class="select" style="width:200px;margin:0 20px">
					<uni-data-select v-model="selectTimeVal" :localdata="range" @change="changeDateSelect"></uni-data-select>
				</view>
				<view class="" style="display: flex;width:400px;">
					<uni-easyinput errorMessage v-model="searchVal" focus placeholder="搜索内容"></uni-easyinput>
					<button size="mini" plain style="margin:5rpx 10rpx;">搜索</button>
				</view>
			</view>
		</view>
		
		<view class="cards"  >
			<view class="box_list animated-item" 	 v-for="(item,index) in Data"
				:style="`transform: translate(${ Math.floor(Math.random() * (255- (-255)+ 1)) + -255}px,
				${Math.floor(Math.random() * (255- (-255)+ 1)) + -255}px);  `"
			>
				<view class="title">
					<view class="headerimage titleApp">
						{{
							getTypeName(item.type)
						}}
					</view>
					<text class="text" style="font-weight:bold">
					</text>
					<text class="text">
					</text>
				</view>
				<view class="body_row">
					<view class="center pages_content">
						<uni-collapse style="background:#f9f9f9;" >
							<uni-collapse-item style="background:#f9f9f9;" :title="item.text?item.text:'暂无'" :show-animation="true">
								<view class="" style="background:#f9f9f9;">
									<text class="text">
										{{item.text?item.text:'暂无'}}
									</text>
								</view>
							</uni-collapse-item>					
						</uni-collapse>
					</view>
				</view>
				<view class="body_row">
					<view class="right pages_content">
						<uni-dateformat :date="item.create_time"></uni-dateformat>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="uni-pagination-box">
			<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title=""
				:total="total"></uni-pagination>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.databaseForJQL()
	const collection = "users_log"
	let Where = {};
	export default {
		data() {
			return {
				// 分页
				total: 0, //  总条数
				skip: 0, // 开始查询位置
				limit: 20, // 单词查询条数
				currentPage: 1, // 当前页
				routes: [{
						to: "/pages/index/index",
						name: "首页",
					},
					{
						to: "",
						name: "日志管理",
					},
					{
						to: "",
						name: "操作日志",
					},
				],
				//a 日期下拉框
				selectTimeVal:0,
				range: [
				   { value: 0, text: "查买家" },
				   { value: 1, text: "查商家" },
					{ value: 2, text: "查骑手" },
				],
				Data: []
			}
		},
		onLoad() {
			this.getOperateLogData()
		},
		methods: {
			getOperateLogData() {
				db.collection(collection).where(Where).orderBy("create_time desc").skip(this.skip).limit(12).get({
					getOne: false,
					getCount: true
				}).then(res => {
					this.Data = res.data
					this.total = res.count
				})
			},
			// 下拉框
			changeDateSelect(e){
				e = e+1
				if(e == 1){
					Where = `type == ${1}`
				}else if(e==2){
					Where = `type == ${2}`
				}else if(e==3){
					Where = `type == ${3}`
				}
				this.getOperateLogData()
			},
			// 分页
			enventFneye(val) {
				this.skip = (val.current - 1) * 12
				this.getOperateLogData()
			},
			getTypeName(num) {
				switch (num) {
					case 1:
						return '买家端';
					case 2:
						return '商家端';
					case 3:
						return '骑手端';
				}
			},
			// 放大图片
			eventImage(image) {
				uni.previewImage({
					urls: [image]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cards{
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		column-gap:10px;
		row-gap:20px;
		margin:20px 0;
		.box_list{
			position: relative;
			min-height: 100px;
			border-radius:5px;
			padding:10px 10px 80px 10px;
			box-shadow:0 3px 10px 0 #dadada;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.headerimage{
					flex:.3;
				}
				.text{
					flex:1;
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 使用省略号代替被截断的文本*/
					display: -webkit-box; /* 将元素作为弹性伸缩盒子 */
					-webkit-line-clamp:1; /* 最多显示两行 */
					-webkit-box-orient: vertical; /* 设置弹性伸缩盒子的子元素垂直排列 */
				}
				.text:last-child{
					flex:.4;
					text-align: right;
				}
			}
			.body_button{
				width:95%;
				position: absolute;
				bottom:20px;
			}
			.row_scroll{
				overflow-x: auto;
				column-gap:10px;
				white-space: nowrap;
				.image{
					display: inline-block; 
					margin:0 10px 0 0;
					width:90px;
					text-align: center;
					min-height:20px;
					background:#f0f0f0;
					border-radius:5px;;
				}
			}
			.body_row{
				display: flex;
				justify-content:left;
				align-items: center;
				margin:5px 0;
				.left{
					flex:.3;
				}
				.center{
					flex:1;
				}
				.right{
					flex:.8;
					color:#868686;
				}
			}
			.body_row , .title , .row_scroll {
				padding:8px 10px;
				border-bottom:2px dotted #eee;
			}
		}
	}
	.animated-item {
		opacity: 0;
		animation: fadeInLeft 1s ease forwards;
	}
	@keyframes fadeInLeft {
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	.feedback {
		padding: 20px;
	}
</style>